<template>
	<div>
		<div style="display: flex;flex-direction: row;width: 320px;margin: auto;margin-top: 10px;">
			<el-input placeholder="搜索" v-model="input" class="searchinput1">
				<i slot="prefix" class="el-input__icon el-icon-search" style="position: absolute; top: -7px;"></i>
			</el-input>
			<el-button type="primary" style="width: 70px;height: 25px; line-height: 20px;border-radius: 0px 20px 20px 0px;background-color: rgba(0, 128, 255, 100);text-align: center;box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.24);"
			class="button">
				<p style="font-size: 9px;text-align: center;font-family: Roboto;margin-top: -11px;margin-left: -10px;color: #ffffff;">
					搜索帖子
				</p>
			</el-button>
		</div>
		<div>
			<img class="ltimg" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=312685682,1506312734&fm=26&gp=0.jpg" />
		</div>
		<div>
			<el-card class="box-card-lt">
				<div class="headinglayout">
					<div>
						<img src="../assets/background.png" style="width: 100px;height: 100px;" />
					</div>
					<div style="font-family: 'PingFang SC';font-size: 50px;margin-left: 30px;margin-top: 10px;">
						健身论坛
					</div>
				</div>
			</el-card>
		</div>
		<div class="lttz">
			<el-card class="box-card-lttz">
				<div style="display: flex;justify-content:space-between;">
					<div style="font-family: 'PingFang SC';font-size: 20px;margin-left: 30px;margin-top: 10px;">
						帖子题目
					</div>
					<div style="margin-top: 10px;">
						帖子作者
					</div>
				</div>
				<div style="margin-top: 10px;margin-left: 40px;">
					帖子内容
				</div>
			</el-card>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				logo: require("../assets/logo.png"),
				input: ''
			}
		},
		methods: {
			mounted() {
				this.requestUser()
			},
			requestUser() {
				var that = this
				this.$axios.post('http://localhost:8080/getbookbyid/' + this.input)
					.then(function(response) {
						console.log(response.data.data)
						alert("查询成功")
						that.tableData = response.data.data
					}).catch(function(error) {
						console.log(error)

					})
			}
		}
	}
</script>

<style>
	.searchinput input.el-input__inner {
		height: 25px;
		width: 250px;
		border-radius: 90px 0px 0px 90px;
		background-color: rgba(250, 250, 250, 100);
		text-align: center;
		border: 1px rgba(255, 0, 0, 0);
		font-size: 10px;

	}

	.ltimg {
		display: flex;
		flex-direction: column;
		width: 90%;
		height: 200px;
		margin-top: 20px;
		margin-left: 5%;

	}

	.box-card-lt {
		margin-top: 10px;
		margin-left: 90px;
		width: 85%;
		height: 150px;
	}

	.headinglayout {
		display: flex;
		flex-direction: row;
	}

	.box-card-lttz {
		margin-top: 30px;
		margin-left: 120px;
		width: 80%;
		height: 100px;
		margin-bottom: 10px;
	}
</style>
